<template>
  <div class="user-profile-page">
    <div class="container">
      <!-- 用户信息卡片 -->
      <div class="user-info-card">
        <div class="user-header">
          <div class="avatar-section">
            <AvatarUpload 
              :avatar="userStore.userInfo?.avatar || '/images/default-avatar.png'" 
              @success="handleAvatarSuccess"
            />

            <div class="user-status">
              <a-tag v-if="userStore.userInfo?.isVerified" color="green">
                <SafetyCertificateOutlined />
                已实名认证
              </a-tag>
              <a-tag v-else color="orange">
                <ExclamationCircleOutlined />
                未认证
              </a-tag>
            </div>
          </div>
          
          <div class="user-details">
              <h2>{{ userStore.userInfo?.username || '未知用户' }}</h2>
              <p class="user-meta">
                <span>手机号: {{ userStore.userInfo?.phone || '未设置' }}</span>
              </p>
              <p class="join-time">
                加入时间: {{ formatChineseDate(userStore.userInfo?.createdAt, false) }}
              </p>
              
              <!-- 新增个人信息详情 -->
              <!-- <div class="personal-info-details">
                <div class="info-row">
                  <span class="info-label">游戏账号:</span>
                  <span class="info-value">{{ userStore.userInfo?.deltaAccount || '未设置' }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">游戏密码:</span>
                  <span class="info-value">{{ userStore.userInfo?.deltaPassword ? '••••••' : '未设置' }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">备用联系方式:</span>
                  <span class="info-value">{{ userStore.userInfo?.phone2 || '未设置' }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">可联系时间:</span>
                  <span class="info-value">{{ userStore.userInfo?.contactTime || '未设置' }}</span>
                </div>
                <div class="info-row qr-section" v-if="userStore.userInfo?.wechatQRCode">
                  <span class="info-label">微信二维码:</span>
                  <div class="qr-container">
                    <img :src="userStore.userInfo?.wechatQRCode" alt="微信二维码" class="wechat-qr" />
                  </div>
                </div>
              </div> -->
            </div>
          
          <!-- <div class="user-balance">
            <div class="balance-amount">
              <span class="label">战队名称</span>
              <span class="amount">{{ userStore.userInfo?.team || '独立勇士' }} 队</span>
            </div>
            <div class="balance-actions">
              <a-button type="default" size="small" @click="showRechargeModal" style="margin-top: 8px">
                <template #icon></template>
                更改战队
              </a-button>
              <a-button type="primary" size="small" @click="showWithdrawModal" style="margin-top: 8px">
                <template #icon><MinusOutlined /></template>
                退出战队
              </a-button>
            </div>
          </div> -->

                    <div class="user-balance">
            <div class="balance-amount">
              <span class="label">账户余额</span>
              <span class="amount">{{ userStore.userInfo?.balance || 0 }}</span>
            </div>
            <div class="balance-actions">
              <a-button type="primary" size="small" @click="refreshBalance" style="margin-top: 8px">
                刷新余额
              </a-button>
              <a-button type="primary" size="small" @click="showWithdrawModal" style="margin-top: 8px">
                提现
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div class="menu-tabs">
        <!-- 在移动端使用顶部标签页 -->
        <a-tabs v-model:activeKey="activeTab" :tab-position="isMobile ? 'top' : 'left'" @change="handleTabChange">
          <a-tab-pane key="accounts" tab="我的账号">
            <div class="tab-content">
              <MyAccountList />
            </div>
          </a-tab-pane>
          
          <a-tab-pane key="orders" tab="我的订单">
            <div class="tab-content">
              <OrderManagement @order-updated="handleOrderUpdated" />
            </div>
          </a-tab-pane>
          
          <a-tab-pane key="transactions" tab="资金明细">
            <div class="tab-content">
              <TransactionHistory @transaction-updated="handleTransactionUpdated" />
            </div>
          </a-tab-pane>

          <a-tab-pane key="withdraw" tab="提现管理">
            <div class="tab-content">
              <WithdrawManager />
            </div>
          </a-tab-pane>
          
          <a-tab-pane key="verification" tab="实名认证">
            <div class="tab-content">
              <div v-if="userStore.userInfo?.isVerified" class="verification-status verified">
                <div class="status-icon">
                  <SafetyCertificateOutlined />
                </div>
                <div class="status-content">
                  <h3>实名认证已完成</h3>
                  <p>您的账户已通过实名认证，可以正常使用所有功能</p>
                  <!-- <div class="verified-info">
                    <div class="info-item">
                      <span class="label">真实姓名:</span>
                      <span class="value">{{ maskName(userStore.userInfo?.realName) }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">身份证号:</span>
                      <span class="value">{{ maskIdCard(userStore.userInfo?.idCard) }}</span>
                    </div>
                  </div> -->
                </div>
              </div>
              
              <div v-else class="verification-form">
                <div class="form-header">
                  <h3>实名认证</h3>
                  <p>为了保障账户安全，请完成实名认证</p>
                </div>
                
                <a-form
                  :model="verificationForm"
                  :rules="verificationRules"
                  layout="vertical"
                  @finish="submitVerification"
                >
                  <a-form-item label="真实姓名" name="realName">
                    <a-input
                      v-model:value="verificationForm.realName"
                      placeholder="请输入真实姓名"
                      size="large"
                    />
                  </a-form-item>
                  
                  <a-form-item label="身份证号" name="idCard">
                    <a-input
                      v-model:value="verificationForm.idCard"
                      placeholder="请输入18位身份证号码"
                      size="large"
                    />
                  </a-form-item>
                  
                  <div class="verification-tips">
                    <h4>认证说明：</h4>
                    <ul>
                      <li>请确保填写的信息真实有效</li>
                      <li>实名认证后无法修改，请仔细核对</li>
                      <li>认证信息仅用于身份验证，严格保密</li>
                    </ul>
                  </div>
                  
                  <a-form-item>
                    <a-button
                      type="primary"
                      html-type="submit"
                      size="large"
                      :loading="verifying"
                      block
                    >
                      提交实名认证
                    </a-button>
                  </a-form-item>
                </a-form>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <a-modal
      v-model:open="rechargeVisible"
      title="账户充值"
      :footer="null"
      :width="isMobile ? '90%' : '400px'"
    >
      <div class="recharge-content">
        <p>选择充值金额:</p>
        <div class="amount-options">
          <a-button
            v-for="amount in rechargeAmounts"
            :key="amount"
            :class="{ 'selected': selectedAmount === amount }"
            @click="selectedAmount = amount"
          >
            ¥{{ amount }}
          </a-button>
        </div>
        
        <a-input-number
          v-model:value="customAmount"
          placeholder="自定义金额"
          :min="1"
          :max="10000"
          :precision="2"
          size="large"
          style="width: 100%; margin: 16px 0;"
        />
        
        <a-button
          type="primary"
          size="large"
          block
          @click="handleRecharge"
          :loading="recharging"
        >
          确认充值 ¥{{ selectedAmount || customAmount || 0 }}
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount, onUnmounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  SafetyCertificateOutlined,
  ExclamationCircleOutlined,
  PlusOutlined,
  ReloadOutlined,
  MinusOutlined
} from '@ant-design/icons-vue'
import authAPI from '@/api/auth'
import WithdrawManager from '~/components/WithdrawManager.vue'
import { formatChineseDate } from '~/utils/dateUtils'

const userStore = useUserStore()

// 获取个人信息
userStore.getUserInfo()

// 响应式数据
const user = ref(null)
const activeTab = ref('accounts')
const myAccounts = ref([])
const accountsLoading = ref(false)
const updating = ref(false)
const verifying = ref(false)
const rechargeVisible = ref(false)
const recharging = ref(false)
const selectedAmount = ref(null)
const customAmount = ref(null)
const refreshingBalance = ref(false)
const isMobile = ref(false)

// 充值金额选项
const rechargeAmounts = [10, 50, 100, 200, 500, 1000]

// 实名认证表单
const verificationForm = reactive({
  realName: '',
  idCard: ''
})

// 实名认证验证规则
const verificationRules = {
  realName: [
    { required: true, message: '请输入真实姓名' },
    { min: 2, max: 10, message: '真实姓名长度在2-10个字符' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '身份证号格式不正确' }
  ]
}

// 检测是否为移动端
const checkIsMobile = () => {
  isMobile.value = window.innerWidth < 768
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const result = await authAPI.getUserInfo()
    console.log(result);
    if (result.code === 200) {
      user.value = result.data
      // 填充实名认证表单
      verificationForm.realName = user.value.realName || ''
      verificationForm.idCard = user.value.idCard || ''
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 刷新余额
const refreshBalance = async () => {
  try {
    refreshingBalance.value = true
    await userStore.getUserInfo()
    message.success('余额已刷新')
  } catch (error) {
    message.error('刷新失败，请稍后重试')
  } finally {
    refreshingBalance.value = false
  }
}

// 遮盖姓名
const maskName = (name) => {
  if (!name || name.length < 2) return name
  return name.charAt(0) + '*'.repeat(name.length - 1)
}

// 遮盖身份证号
const maskIdCard = (idCard) => {
  if (!idCard || idCard.length < 8) return idCard
  return idCard.substring(0, 4) + '***********' + idCard.substring(idCard.length - 4)
}

// 显示提现弹窗并切换到提现管理标签页
const showWithdrawModal = () => {
  activeTab.value = 'withdraw'
}

// 标签页切换
const handleTabChange = (key) => {
  activeTab.value = key
  if (key === 'accounts') {
    // fetchMyAccounts() // 功能开发中
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    'active': 'green',
    'sold': 'red',
    'rented': 'orange',
    'inactive': 'default'
  }
  return colorMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'active': '在售',
    'sold': '已售',
    'rented': '已租',
    'inactive': '下架'
  }
  return statusMap[status] || '未知'
}

// 编辑商品
const editProduct = (id) => {
  message.info('编辑功能开发中...')
}

// 删除商品
const deleteProduct = async (id) => {
  try {
    const result = await productAPI.deleteProduct(id)
    if (result.status === 'success') {
      message.success('商品删除成功')
      // fetchMyProducts() // 功能已移除
    } else {
      message.error(result.message || '删除失败')
    }
  } catch (error) {
    console.error('删除商品失败:', error)
    message.error('网络错误，请稍后重试')
  }
}

// 提交实名认证
const submitVerification = async (values) => {
  try {
    verifying.value = true
    const result = await authAPI.verifyIdentity({
      realName: values.realName,
      idCard: values.idCard
    })
    
    if (result.status === 'success') {
      message.success('实名认证成功')
      await userStore.getUserInfo()
      await fetchUserInfo()
    } else {
      message.error(result.message || '认证失败')
    }
  } catch (error) {
    console.error('实名认证失败:', error)
    // 处理具体的错误信息
    if (error.message) {
      message.error(error.message)
    } else {
      message.error('网络错误，请稍后重试')
    }
  } finally {
    verifying.value = false
  }
}

// 显示充值弹窗
const showRechargeModal = () => {
  rechargeVisible.value = true
  selectedAmount.value = null
  customAmount.value = null
}

// 处理充值
const handleRecharge = async () => {
  const amount = selectedAmount.value || customAmount.value
  if (!amount || amount <= 0) {
    message.error('请选择充值金额')
    return
  }
  
  try {
    recharging.value = true
    message.info('充值功能开发中，这里应该跳转到支付页面')
    rechargeVisible.value = false
  } catch (error) {
    console.error('充值失败:', error)
    message.error('充值失败，请稍后重试')
  } finally {
    recharging.value = false
  }
}

// 订单更新处理
const handleOrderUpdated = () => {
  message.success('订单状态已更新')
  // 可以在这里添加其他更新逻辑，比如刷新用户余额等
}

// 交易记录更新处理
const handleTransactionUpdated = () => {
  message.success('交易记录已更新')
  // 刷新用户信息以更新余额显示
  userStore.getUserInfo()
}

// 头像上传成功处理
const handleAvatarSuccess = (avatarUrl) => {
  message.success('头像上传成功')
  // 刷新用户信息
  userStore.getUserInfo()
}

// 图片错误处理
const handleImageError = (event) => {
  event.target.src = '/default-product.jpg'
}

// 页面初始化
onBeforeMount(() => {
  checkIsMobile()
  window.addEventListener('resize', checkIsMobile)
})

onMounted(() => {
  // 检查登录状态
  const token = localStorage.getItem('token')
  if (!token) {
    message.error('请先登录')
    navigateTo('/')
    return
  }
  
  // fetchUserInfo()
  // fetchMyProducts() // 功能已移除
})

onUnmounted(() => {
  window.removeEventListener('resize', checkIsMobile)
})

// 设置页面元信息
useHead({
  title: '个人中心 - 游戏账号租赁平台',
  meta: [
    { name: 'description', content: '管理您的账号信息和商品' }
  ]
})
</script>

<style scoped lang="scss">
.container {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  min-width: 1024px;
  @media (max-width: 992px) {
    min-width: 100%;
  }
  @media (max-width: 768px) {
    min-width: 100vw;
  }
}
.user-profile-page {
  min-height: 100vh;
  padding: 24px 0;
  .user-info-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .user-header {
      display: flex;
      align-items: center;
      gap: 24px;

      .avatar-section {
        text-align: center;

        :deep(.ant-avatar) {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 12px;
        }

        .user-status {
          margin-top: 10px;
          :deep(.ant-tag) {
            margin: 0;
            border-radius: 12px;
            padding: 4px 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }

      .user-details {
        flex: 1;

        h2 {
          font-size: 1.5rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }

        .user-meta {
          display: flex;
          gap: 24px;
          margin-bottom: 8px;
          flex-wrap: wrap;

          span {
            color: #666;
            font-size: 14px;
          }
        }

        .join-time {
          color: #999;
          font-size: 13px;
          margin: 0;
        }
      }

      .user-balance {
        text-align: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 12px;
        min-width: 180px;

        .balance-amount {
          margin-bottom: 16px;

          .label {
            display: block;
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 4px;
          }

          .amount {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }

        .balance-actions {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .ant-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            height: 32px;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              border-color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
          .user-details {
        flex: 1;

        h2 {
          font-size: 1.5rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }

        .user-meta {
          display: flex;
          gap: 24px;
          margin-bottom: 8px;
          flex-wrap: wrap;

          span {
            color: #666;
            font-size: 14px;
          }
        }

        .join-time {
          color: #999;
          font-size: 13px;
          margin: 0;
        }
        
        // 新增个人信息详情样式
        .personal-info-details {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid #eee;
          
          .info-row {
            display: flex;
            margin-bottom: 8px;
            
            .info-label {
              font-weight: 500;
              color: #333;
            }
            
            .info-value {
              flex: 1;
              color: #666;
              word-break: break-all;
            }
            
            &.qr-section {
              align-items: flex-start;
              
              .qr-container {
                flex: 1;
                
                .wechat-qr {
                  width: 100px;
                  height: 100px;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
  }


  .menu-tabs {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    :deep(.ant-tabs) {
      .ant-tabs-nav {
        margin: 0;
        // padding: 0 32px;
        background: #fafafa;

        .ant-tabs-tab {
          padding: 16px 24px;
          font-weight: 500;
          color: #666;

          &.ant-tabs-tab-active {
            color: #1890ff;
            background: white;
          }

          &:hover {
            color: #1890ff;
          }
        }

        .ant-tabs-ink-bar {
          background: #1890ff;
        }
      }

      .ant-tabs-content-holder {
        .ant-tabs-content {
          .ant-tabs-tabpane {
            padding: 0;
          }
        }
      }
    }

    .tab-content {
      padding: 16px;

      h3 {
        font-size: 1.25rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 24px;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        h3 {
          margin: 0;
        }

        .ant-btn {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      // 商品列表样式
      .products-list {
        .product-item {
          display: flex;
          align-items: center;
          gap: 16px;
          background: #fafafa;
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 16px;
          transition: all 0.3s;

          &:hover {
            background: #f0f8ff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
          }

          .product-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .product-info {
            flex: 1;

            h4 {
              font-size: 1rem;
              font-weight: bold;
              color: #333;
              margin-bottom: 8px;
            }

            .product-meta {
              display: flex;
              justify-content: space-between;
              margin-bottom: 4px;
              font-size: 14px;
              color: #666;
            }

            .product-price {
              font-size: 16px;
              font-weight: bold;
              color: #e74c3c;
              margin: 0;

              span {
                font-size: 12px;
                color: #666;
              }
            }
          }

          .product-status {
            text-align: center;
            min-width: 100px;

            .product-stats {
              margin-top: 8px;
              font-size: 12px;
              color: #999;

              span {
                display: block;
                margin-bottom: 2px;
              }
            }
          }

          .product-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 80px;

            .ant-btn {
              font-size: 12px;
              height: 28px;
              padding: 0 12px;
            }
          }
        }
      }

      .empty-state {
        text-align: center;
        padding: 60px 0;
      }

      .coming-soon {
        text-align: center;
        padding: 80px 0;
      }

      // 表单样式
      :deep(.ant-form) {
        .ant-form-item {
          margin-bottom: 20px;

          .ant-form-item-label {
            > label {
              font-weight: 500;
              color: #333;
            }
          }

          .ant-input,
          .ant-input-number {
            border-radius: 8px;
            border: 1px solid #d9d9d9;

            &:hover {
              border-color: #40a9ff;
            }

            &:focus {
              border-color: #1890ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }

            &:disabled {
              background: #f5f5f5;
              color: #999;
            }
          }
        }

        .ant-btn {
          height: 48px;
          padding: 0 32px;
          font-size: 16px;
          border-radius: 8px;
          font-weight: 500;

          &.ant-btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

            &:hover {
              background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
              box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
              transform: translateY(-1px);
            }
          }
        }
      }
    }
  }

  // 充值弹窗样式
  .recharge-content {
    text-align: center;

    p {
      font-size: 16px;
      color: #333;
      margin-bottom: 16px;
    }

    .amount-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;

      .ant-btn {
        height: 48px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        border: 2px solid #e8e8e8;
        background: white;
        color: #666;
        transition: all 0.3s;

        &:hover,
        &.selected {
          border-color: #1890ff;
          color: #1890ff;
          background: #f0f8ff;
        }
      }
    }

    :deep(.ant-input-number) {
      .ant-input-number-input {
        text-align: center;
        font-size: 16px;
      }
    }

    .ant-btn-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

      &:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        transform: translateY(-1px);
      }
    }
  }

  // 实名认证样式
  .verification-status {
    &.verified {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px;
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: white;
      border-radius: 12px;
      margin-bottom: 24px;

      .status-icon {
        font-size: 48px;
        opacity: 0.9;
      }

      .status-content {
        flex: 1;

        h3 {
          margin: 0 0 8px 0;
          font-size: 20px;
          font-weight: 600;
        }

        p {
          margin: 0 0 16px 0;
          opacity: 0.9;
        }

        .verified-info {
          .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .label {
              opacity: 0.8;
            }

            .value {
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .verification-form {
    max-width: 500px;
    margin: 0 auto;

    .form-header {
      text-align: center;
      margin-bottom: 32px;

      h3 {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }

      p {
        color: #666;
        margin: 0;
      }
    }

    .verification-tips {
      background: #f6f8fa;
      border: 1px solid #e1e4e8;
      border-radius: 8px;
      padding: 16px;
      margin: 16px 0;

      h4 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0;
      }

      ul {
        margin: 0;
        padding-left: 16px;

        li {
          font-size: 13px;
          color: #666;
          margin-bottom: 4px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 992px) {
  .user-profile-page {
    .user-info-card {
      padding: 24px;

      .user-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;

        .user-details {
          .user-meta {
            justify-content: center;
            gap: 16px;
          }
          
          // 移动端个人信息详情样式调整
          .personal-info-details {
            text-align: left;
            
            .info-row {
              .info-label {
                width: 90px;
              }
              
              &.qr-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                
                .qr-container {
                  .wechat-qr {
                    width: 80px;
                    height: 80px;
                  }
                }
              }
            }
          }
        }

        .user-balance {
          width: 100%;
          max-width: 300px;
        }
      }
    }

    .menu-tabs {
      :deep(.ant-tabs-nav) {
        padding: 0 16px;
      }

      .tab-content {
        // padding: 24px;

        .products-list .product-item {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;

          .product-image {
            width: 100%;
            height: 200px;
            align-self: center;
          }

          .product-status,
          .product-actions {
            width: 100%;
            text-align: center;

            .product-actions {
              flex-direction: row;
              justify-content: center;
              gap: 12px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
  
  .user-profile-page {
    padding: 12px 0;

    .user-info-card {
      padding: 16px;
      margin-bottom: 12px;
      border-radius: 8px;
      
      .user-header {
        gap: 16px;
        
        .avatar-section {
          :deep(.ant-avatar) {
            width: 60px !important;
            height: 60px !important;
            font-size: 24px;
          }
          
          .user-status {
            margin-top: 8px;
            
            :deep(.ant-tag) {
              font-size: 11px;
              padding: 2px 8px;
            }
          }
        }
        
        .user-details {
          h2 {
            font-size: 1.25rem;
            margin-bottom: 6px;
          }
          
          .user-meta {
            flex-direction: column;
            gap: 4px;
            align-items: center;
            
            span {
              font-size: 13px;
            }
          }
          
          .join-time {
            font-size: 12px;
            text-align: center;
          }
          
          // 移动端个人信息详情样式调整
          .personal-info-details {
            .info-row {
              flex-direction: column;
              gap: 4px;
              
              .info-label {
                width: auto;
                font-weight: 600;
              }
              
              .info-value {
                font-size: 13px;
              }
              
              &.qr-section {
                .qr-container {
                  .wechat-qr {
                    width: 70px;
                    height: 70px;
                  }
                }
              }
            }
          }
        }
        
        .user-balance {
          padding: 16px;
          min-width: auto;
          width: 100%;
          max-width: 280px;
          
          .balance-amount {
            margin-bottom: 12px;
            
            .label {
              font-size: 13px;
            }
            
            .amount {
              font-size: 1.25rem;
            }
          }
          
          .balance-actions {
            flex-direction: row;
            gap: 8px;
            
            .ant-btn {
              flex: 1;
              height: 28px;
              font-size: 12px;
            }
          }
        }
      }
    }

    .menu-tabs {
      border-radius: 8px;
      
      :deep(.ant-tabs) {
        .ant-tabs-nav {
          padding: 0 8px;
          margin: 0;

          .ant-tabs-tab {
            padding: 10px 12px;
            font-size: 13px;
            margin: 0 2px;
            min-height: 44px; // 增加触摸目标大小
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.ant-tabs-tab-active {
              font-weight: 600;
            }
          }
          
          .ant-tabs-ink-bar {
            height: 3px;
          }
        }
        
        // 移动端标签页内容优化
        .ant-tabs-content-holder {
          .ant-tabs-content {
            .ant-tabs-tabpane {
              padding: 0;
            }
          }
        }
      }

      .tab-content {
        padding: 16px 12px;

        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 16px;
          
          h3 {
            font-size: 1.1rem;
            margin-bottom: 0;
          }
        }

        :deep(.ant-form) {
          .ant-form-item {
            margin-bottom: 16px;
            
            .ant-form-item-label {
              > label {
                font-size: 14px;
              }
            }
          }
          
          .ant-row .ant-col {
            width: 100% !important;
            margin-bottom: 12px;
          }

          .ant-input,
          .ant-input-number,
          .ant-select .ant-select-selector {
            height: 44px !important; // 移动端更大的触摸目标
            font-size: 16px; // 防止iOS缩放
            border-radius: 6px;
          }
          
          .ant-input-number .ant-input-number-input {
            height: 44px !important;
            font-size: 16px;
          }
          
          .ant-select .ant-select-selection-item,
          .ant-select .ant-select-selection-placeholder {
            line-height: 44px !important;
            font-size: 16px;
          }

          .ant-btn {
            width: 100%;
            height: 44px;
            font-size: 16px;
            margin-bottom: 12px;
            border-radius: 6px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        
        // 实名认证表单优化
        .verification-form {
          .form-header {
            margin-bottom: 24px;
            
            h3 {
              font-size: 1.3rem;
            }
            
            p {
              font-size: 14px;
            }
          }
          
          .verification-tips {
            padding: 12px;
            margin: 12px 0;
            
            h4 {
              font-size: 13px;
            }
            
            ul {
              padding-left: 14px;
              
              li {
                font-size: 12px;
              }
            }
          }
        }
        
        // 已认证状态优化
        .verification-status.verified {
          flex-direction: column;
          text-align: center;
          padding: 20px 16px;
          gap: 12px;
          
          .status-icon {
            font-size: 36px;
          }
          
          .status-content {
            h3 {
              font-size: 1.2rem;
              margin-bottom: 6px;
            }
            
            p {
              font-size: 14px;
              margin-bottom: 12px;
            }
          }
        }
      }
    }

    .recharge-content {
      padding: 8px;
      
      p {
        font-size: 15px;
        margin-bottom: 12px;
      }
      
      .amount-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 12px;
        
        .ant-btn {
          height: 44px;
          font-size: 15px;
          border-radius: 6px;
        }
      }
      
      :deep(.ant-input-number) {
        height: 44px;
        margin: 12px 0;
        
        .ant-input-number-input {
          font-size: 16px;
          height: 44px !important;
        }
      }
      
      .ant-btn-primary {
        height: 44px;
        font-size: 16px;
        border-radius: 6px;
      }
    }
  }
}

// 超小屏幕适配 (≤480px)
@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }
  
  .user-profile-page {
    padding: 8px 0;
    
    .user-info-card {
      padding: 12px;
      margin-bottom: 8px;
      
      .user-header {
        gap: 12px;
        
        .avatar-section {
          :deep(.ant-avatar) {
            width: 50px !important;
            height: 50px !important;
            font-size: 20px;
          }
        }
        
        .user-details {
          h2 {
            font-size: 1.1rem;
          }
          
          .user-meta span {
            font-size: 12px;
          }
          
          .join-time {
            font-size: 11px;
          }
        }
        
        .user-balance {
          padding: 12px;
          
          .balance-amount {
            .label {
              font-size: 12px;
            }
            
            .amount {
              font-size: 1.1rem;
            }
          }
          
          .balance-actions .ant-btn {
            height: 26px;
            font-size: 11px;
          }
        }
      }
    }
    
    .menu-tabs {
      :deep(.ant-tabs) {
        .ant-tabs-nav {
          padding: 0 6px;
          
          .ant-tabs-tab {
            padding: 8px 10px;
            font-size: 12px;
            min-height: 40px;
          }
        }
      }
      
      .tab-content {
        padding: 12px 8px;
        
        .section-header h3 {
          font-size: 1rem;
        }
        
        :deep(.ant-form) {
          .ant-form-item {
            margin-bottom: 14px;
            
            .ant-form-item-label > label {
              font-size: 13px;
            }
          }
          
          .ant-input,
          .ant-input-number,
          .ant-select .ant-select-selector {
            height: 42px !important;
            font-size: 16px;
          }
          
          .ant-btn {
            height: 42px;
            font-size: 15px;
          }
        }
        
        .verification-form {
          .form-header {
            margin-bottom: 20px;
            
            h3 {
              font-size: 1.2rem;
            }
            
            p {
              font-size: 13px;
            }
          }
        }
        
        .verification-status.verified {
          padding: 16px 12px;
          
          .status-icon {
            font-size: 32px;
          }
          
          .status-content {
            h3 {
              font-size: 1.1rem;
            }
            
            p {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  
  // 充值弹窗小屏优化
  .recharge-content {
    .amount-options {
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      
      .ant-btn {
        height: 42px;
        font-size: 14px;
      }
    }
    
    :deep(.ant-input-number) {
      height: 42px;
      
      .ant-input-number-input {
        height: 42px !important;
      }
    }
    
    .ant-btn-primary {
      height: 42px;
      font-size: 15px;
    }
  }
}
</style>